<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :xs="24" :sm="12" :md="6" v-for="stat in stats" :key="stat.title">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: stat.color }">
              <el-icon size="24">
                <component :is="stat.icon" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stat.value }}</div>
              <div class="stat-title">{{ stat.title }}</div>
              <div class="stat-change" :class="stat.trend">
                <el-icon size="12">
                  <ArrowUp v-if="stat.trend === 'up'" />
                  <ArrowDown v-else />
                </el-icon>
                {{ stat.change }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 图表区域 -->
      <el-col :xs="24" :lg="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>访问量统计</span>
              <el-button-group>
                <el-button size="small" type="primary">今年</el-button>
                <el-button size="small">本月</el-button>
                <el-button size="small">本周</el-button>
              </el-button-group>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <el-icon size="60" style="color: #ddd;">
                <TrendCharts />
              </el-icon>
              <p style="color: #999; margin-top: 10px;">图表区域</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 用户概况 -->
      <el-col :xs="24" :lg="8">
        <el-card>
          <template #header>
            <span>用户概况</span>
          </template>
          <div class="user-stats">
            <div class="user-stat-item">
              <span class="label">比上周</span>
              <span class="value positive">+23%</span>
            </div>
            <div class="user-stat-item">
              <span class="label">我们为您创建了多个选项，可将您的明细在一个明细页面中显示的页面</span>
            </div>
            <div class="user-stats-numbers">
              <div class="number-item">
                <div class="number">32k</div>
                <div class="label">总用户量</div>
              </div>
              <div class="number-item">
                <div class="number">128k</div>
                <div class="label">总访问量</div>
              </div>
              <div class="number-item">
                <div class="number">1.2k</div>
                <div class="label">日访问量</div>
              </div>
              <div class="number-item">
                <div class="number">+5%</div>
                <div class="label">月增长</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 新用户 -->
      <el-col :xs="24" :lg="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>新用户</span>
              <el-button-group>
                <el-button size="small" type="primary">本月</el-button>
                <el-button size="small">上月</el-button>
                <el-button size="small">今年</el-button>
              </el-button-group>
            </div>
          </template>
          <div class="user-list">
            <div class="user-item" v-for="user in newUsers" :key="user.id">
              <el-avatar :size="40" :src="user.avatar">
                <el-icon><User /></el-icon>
              </el-avatar>
              <div class="user-info">
                <div class="user-name">{{ user.name }}</div>
                <div class="user-location">{{ user.location }}</div>
              </div>
              <div class="user-gender">{{ user.gender }}</div>
              <div class="user-progress">
                <el-progress :percentage="user.progress" :stroke-width="6" />
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 动态 -->
      <el-col :xs="24" :lg="8">
        <el-card>
          <template #header>
            <span>动态</span>
          </template>
          <div class="activity-list">
            <div class="activity-item" v-for="activity in activities" :key="activity.id">
              <div class="activity-user">
                <el-avatar :size="30" :src="activity.avatar">
                  <el-icon><User /></el-icon>
                </el-avatar>
                <span class="activity-name">{{ activity.user }}</span>
              </div>
              <div class="activity-content">{{ activity.content }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 代办事项 -->
      <el-col :xs="24" :lg="8">
        <el-card>
          <template #header>
            <span>代办事项</span>
          </template>
          <div class="todo-list">
            <div class="todo-item" v-for="todo in todos" :key="todo.id">
              <el-checkbox v-model="todo.completed" @change="handleTodoChange(todo)">
                {{ todo.text }}
              </el-checkbox>
              <span class="todo-time">{{ todo.time }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Dashboard',
  setup() {
    const stats = ref([
      {
        title: '总访问数',
        value: '9120',
        icon: 'Monitor',
        color: '#409eff',
        change: '+20%',
        trend: 'up'
      },
      {
        title: '在线访客数',
        value: '182',
        icon: 'User',
        color: '#67c23a',
        change: '+10%',
        trend: 'up'
      },
      {
        title: '点击量',
        value: '9520',
        icon: 'Mouse',
        color: '#e6a23c',
        change: '-2%',
        trend: 'down'
      },
      {
        title: '新用户',
        value: '156',
        icon: 'UserFilled',
        color: '#f56c6c',
        change: '+30%',
        trend: 'up'
      }
    ])
    
    const newUsers = ref([
      {
        id: 1,
        name: '中小鱼',
        location: '北京',
        gender: '女',
        progress: 80,
        avatar: ''
      },
      {
        id: 2,
        name: '何小茹',
        location: '深圳',
        gender: '男',
        progress: 20,
        avatar: ''
      }
    ])
    
    const activities = ref([
      {
        id: 1,
        user: '中小鱼',
        content: '发布了 Vue3 + TypeScript + Vite 项目式编程技术',
        avatar: ''
      },
      {
        id: 2,
        user: '何小茹',
        content: '发布了 Vue3 + TypeScript + Vite 项目式编程技术',
        avatar: ''
      }
    ])
    
    const todos = ref([
      {
        id: 1,
        text: '报告今天工作的内容',
        time: '上午 09:30',
        completed: false
      },
      {
        id: 2,
        text: '国庆节作',
        time: '上午 10:30',
        completed: true
      },
      {
        id: 3,
        text: '工作心得记录',
        time: '下午 14:30',
        completed: false
      }
    ])
    
    const handleTodoChange = (todo) => {
      console.log('Todo changed:', todo)
    }
    
    return {
      stats,
      newUsers,
      activities,
      todos,
      handleTodoChange
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 0;
  width: 100%;
  max-width: none;
  min-height: 100%;
  box-sizing: border-box;
}

.stat-card {
  margin-bottom: 20px;
  width: 100%;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-change.up {
  color: #67c23a;
}

.stat-change.down {
  color: #f56c6c;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.chart-placeholder {
  text-align: center;
}

.user-stats {
  padding: 0;
  width: 100%;
}

.user-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.user-stat-item:last-child {
  border-bottom: none;
}

.user-stat-item .label {
  color: #666;
  font-size: 14px;
}

.user-stat-item .value.positive {
  color: #67c23a;
  font-weight: bold;
}

.user-stats-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  width: 100%;
}

.number-item {
  text-align: center;
}

.number-item .number {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.number-item .label {
  font-size: 12px;
  color: #909399;
}

.user-list {
  padding: 0;
  width: 100%;
}

.user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
}

.user-item:last-child {
  border-bottom: none;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.user-location {
  font-size: 12px;
  color: #909399;
}

.user-gender {
  font-size: 14px;
  color: #606266;
  margin-right: 12px;
}

.user-progress {
  width: 80px;
}

.activity-list {
  padding: 0;
  width: 100%;
}

.activity-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
}

.activity-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.activity-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.activity-name {
  font-weight: 500;
  color: #409eff;
}

.activity-content {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.todo-list {
  padding: 0;
  width: 100%;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-time {
  font-size: 12px;
  color: #909399;
}

/* Element Plus 组件宽度重置 */
:deep(.el-row) {
  width: 100% !important;
  max-width: none !important;
}

:deep(.el-col) {
  width: 100% !important;
  max-width: none !important;
}

:deep(.el-card) {
  width: 100% !important;
  max-width: none !important;
}

:deep(.el-card__body) {
  width: 100% !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .chart-container {
    height: 250px;
  }
}

@media (max-width: 768px) {
  .user-stats-numbers {
    grid-template-columns: 1fr;
  }
  
  .stat-content {
    flex-direction: column;
    text-align: center;
  }
  
  .stat-icon {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .chart-container {
    height: 200px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .user-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .user-progress {
    width: 100%;
  }
  
  .activity-user {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>
